<template>
    <view :class="customClass">
        <slot></slot>
    </view>
    <u-modal :show="item.show" :content="item.content" :title="item.title" @confirm="item.confirm" :asyncClose="true"
        v-for="(item, idx) in list" :key="idx" @close="item.close" @cancel="item.cancel"
        :showCancelButton="item.showCanel"></u-modal>
</template>
<script setup lang="ts">
defineProps<{ customClass?: Object | string }>()
import { ref, reactive, onUnmounted } from "vue";
import { reg, unReg } from './pages'
const list = ref<any[]>([])

const dialog = ({ title, content, confirm, cancel, close }: { title?: string, content?: string, confirm?: Function, cancel?: Function, close?: Function }) => {
    const item = reactive({
        title: title || '温馨提示',
        content: content || '',
        show: false,
        showCanel: !!cancel,
        confirm: () => {
            if (confirm?.length) {
                confirm(() => {
                    item.show = false
                    remove()
                })
            } else {
                item.show = false
                confirm && confirm()
                remove()
            }

        },
        cancel: () => {
            item.show = false
            cancel && cancel()
            remove()
        },
        close: () => {
            item.show = false
            close && close()
            remove()
        }
    })
    const remove = () => {
        setTimeout(() => {
            list.value = list.value.filter(child => child !== item)
        }, 500)
    }
    list.value.push(item)
    setTimeout(() => {
        item.show = true
    }, 100)
}
reg(dialog)
onUnmounted(() => {
    unReg()
})
defineExpose({
    dialog
})

</script>